﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="extjs/src/resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" />
    <link href="extjs/src/resources/css/MyExtControls.css" rel="stylesheet" type="text/css" />

    <script src="extjs/ext-core-debug.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="listingbox">
    </div>

    <script type="text/javascript" language="javascript">

    Ext.namespace('Ext.ux.MyGrid');
    Ext.ux.MyGrid = Ext.extend(Ext.util.Observable,{
                    height:600,
                    width:800,
                    autoHeight:this.autoHeight,
                    constructor : function(config){
                        Ext.apply(this,config);
                        Ext.ux.MyGrid.superclass.constructor.call(this);
                        this.el  = Ext.get(this.applyTo);
                        this.el.addClass("listingbox");
                        this.init();
                    },
                    init: function(){
                        if(this.gridData){
                            this.render();
                        }
                    },
                    render:function(){
                        var cols = this.columns;
                        var tableData = this.gridData;
                        var colWidthOffsetArray = new Array();
                        var trArray = new Array();
                        if(Ext.isArray(tableData)){
                            for(var i=0;i<tableData.length;i++){
                                var tdArray = new Array();
                                for(var j=0;j<tableData[i].length;j++){
                                    tdArray.push({tag:'td',id:'grid-row-data-'+i+j,html:tableData[i][j]});
                                }
                                if(i%2 == 0){
                                    trArray.push({tag:'tr',cls:'odd',children:tdArray});
                                }else{
                                    trArray.push({tag:'tr',children:tdArray});
                                }
                            }
                        }
                        else{// for other formats like json,xml etc
                        }
                        var headerStyle = '';
                        var contentStyle = '';
                        if(this.autoHeight == false){
                            headerStyle = 'width:'+this.width+'px;';
                            contentStyle = 'height:'+this.height+'px;width:'+this.width+'px;overflow:auto;';
                        }
                        Ext.DomHelper.append(this.el,[
                           {tag:'div',
                            id:'contentDiv',
                            style:contentStyle,
                            children:[{tag:'table',children:trArray}]
                           }
                        ]);
                        var htrArray = new Array();
                        if(Ext.isArray(cols)){
                            var thArray = new Array();
                            for(var i=0;i<cols.length;i++){
                                var widthOffset = Ext.getDom('grid-row-data-0'+i).clientWidth;
                                var th = {tag:'th',Style:'width:'+widthOffset+'px;',html:cols[i].title};
                                thArray.push(th);
                            }
                           htrArray.push({tag:'tr',children:thArray});
                        }
                        Ext.DomHelper.insertBefore('contentDiv',[
                               {tag:'div',
                                id:'headerDiv',
                                style:headerStyle,
                                children:[{tag:'table',children:htrArray}]
                               }
                        ]);
                    },
                    loadData:function(data){
                        if(Ext.isArray(data)){
                            this.gridData = data;
                            this.init();
                        }else{// for other formats
                        }
                    }
    });

    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],            
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    Ext.onReady(function(){
        var grid = new Ext.ux.MyGrid({
            applyTo:'listingbox',
            columns:[{title:'Company'},{title:'Price'},{title:'Change'},{title:'%Change'},{title:'Last Updated'}],
            height:300,
            width:800,
            autoHeight:true
            //,gridData:myData
        });
        grid.loadData(myData);
    });
    </script>

    </form>
</body>
</html>
